<template>
  <div class="">
    <div class="module-card">
      <h3>vue的消息提示框</h3>
      <div>
        <div class="buttonNormal" @click="handleBtn(btnType.MESSAGE)">普通</div>
        <div class="buttonNormal" @click="handleBtn(btnType.SUCCESS)">成功</div>
        <div class="buttonNormal" @click="handleBtn(btnType.WARNING)">警告</div>
        <div class="buttonNormal" @click="handleBtn(btnType.ERROR)">错误</div>
      </div>
    </div>
    <div class="module-card">
      <h3>英制输入框</h3>
      <InchesInput />
    </div>
    <div class="module-card">
      <h3>原生的消息提示框</h3>
      <div>
        <div class="buttonNormal" @click="handleMessage(MessageType.MESSAGE)">普通</div>
        <div class="buttonNormal" @click="handleMessage(MessageType.SUCCESS)">成功</div>
        <div class="buttonNormal" @click="handleMessage(MessageType.WARNING)">警告</div>
        <div class="buttonNormal" @click="handleMessage(MessageType.ERROR)">错误</div>
      </div>
    </div>
  </div>
</template>

<script>
import notifyMessageJs from './notifyMessageJs';
import { messageControl, MessageType } from './messageDialog.js'
export default {
  props: {},
  components: {
    InchesInput: () => import('@/views/test/inchesInput/InchesInput'),
  },
  data() {
    return {
      btnType: {
        MESSAGE: 'message',
        SUCCESS: 'success',
        WARNING: 'warning',
        ERROR: 'error',
      },
      MessageType,
      messageCompoent: null
    };
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {
      this.messageCompoent = new messageControl()
    },
    handleBtn(type) {
      notifyMessageJs.myMsg.notify({ content: '这里是内容', type: type });
      // notifyMessageJs.myMsg.notify({ content: ['中文', '繁体', '英文'], type: type })
    },
    handleMessage(type) {
      this.messageCompoent.message({
        type: type,
        content: '这里是内容'
      })
    }
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.module-card {
  > div {
    display: flex;
    .buttonNormal {
      margin-right: 20px;
    }
  }
}
</style>
